<template>
	<div class="ui-cascader" :style="style"  :class="[classname,size,disabledClass]">
		<div type="text" class="ui-cascader-text" @click="click" v-html="textValue?textValue:placeholder"></div>
		<input type="hidden" :name="name"/>
		<div class="ui-cascader-block" v-show="isshow" :style="style2">
			<div class="ui-cascader-list" v-show="isshow">
				<a href="javascript:" class="ui-cascader-item"  @click="showson(0,k,v.data)"  :class="v.ison?'on':''"  v-for="(v,k) in this.options">{{v.text}}<span class="font ui-cascader-icon" v-show="v.data">&#xe65f;</span></a>
			</div>
			<div class="ui-cascader-list" v-for="(v,index) in list" v-if="isshowlist(v)">
				<a href="javascript:" class="ui-cascader-item" @click="showson(index+1,k,v2.data)"  :class="v2.ison?'on':''"  v-for="(v2,k) in v">{{index+1}}____{{v2.text}}<span class="font ui-cascader-icon"  v-show="v2.data">&#xe65f;</span></a>
			</div>
		</div>
	</div>
</template>

<script>
	/*
	组件属性[
		data:多级数据
			{default:{
				options:{
					"key1":{text:'key1',value:"1",data:{
						"key1":{text:'key1',value:"1",data:{
									...}
								}
						}
					},
				},
				value:""
			}
		defaultdata:默认显示文字
		style:自定义样式
		class:自定义class
		name:name属性
		size:按钮尺寸 big,normal(默认),small,mini
		disabled：是否交互 true/false
		isasync:是否异步获取列表数据
		getData:异步获取列表回调函数,返回列表数据{"key1":{text:'key1',value:"1"},...},为空则为{}，如果ajax异步获取，需用同步获取
		rules:用于表单验证
			[
				empty:[true/false,"提示信息"],
				int:[true/false,"提示信息"],
				min:[200,"提示信息"],
				...
			]
	]
	组件自定义事件[
		change:选项发生改变时回调的父组件,callback(obj[选中列表数组])
	]
	*/

/*	let data2={
		"key5":{text:'key5',value:"1",data:{"key8":{text:'key8',value:"4"}}},
		"key6":{text:'key6',value:"2",data:{"key8":{text:'key9',value:"4"}}},
		"key7":{text:'key7',value:"3",data:{"key8":{text:'key10',value:"4"}}},
		"key8":{text:'key8',value:"4",data:{"key8":{text:'key11',value:"4"}}},
		"key9":{text:'key9',value:"4",data:{"key8":{text:'key12',value:"4"}}},
		"key10":{text:'key10',value:"4",data:{"key8":{text:'key13',value:"4"}}}
	};
*/
	let data={
		"key11":{text:'key11',value:"1",},
		"key12":{text:'key12',value:"2"},
		"key13":{text:'key13',value:"3"},
		"key14":{text:'key14',value:"4"}
	};
	export default{
		props:{
			"defaultdata":{type:Object,default:""},
			"options":{type:Object,default:{
			    "key1":{text:'key1',value:"1",data:data},
				"key2":{text:'key2',value:"2",},
				"key3":{text:'key3',value:"3",},
				"key4":{text:'key4',value:"4",}
			}},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'name':{type:null,default:""},
			'placeholder':{type:String,default:"请选择..."},
			'disabled':{type:Boolean,default:false},
			'callback':{type:null,default:false},
			'isasync':{type:Boolean,default:false},
			'getData':{type:null,default:null},
			'rules':{type:Array,default:[]},
		},
		data(){
			return {
				uiType:"ui-cscader",
				disabledClass:this.disabled?"disabled":"",
				textValue:this.defaultdata,
				value:"",
				list:[],//子菜单已
				isshow:false,
				record:[],
				style2:{width:0}
			}
		},
		methods:{
			click(){
				this.isshow=!this.isshow;
				this.list2=this.list3=[];
			},
			showson(index,key,data){
				let parent=this.options;
				this.record[index]=key;


                if(!data){
                    if (this.isajax && this.getData) {
						data=this.getData(key);
						if(!data || data=={})data=null;
                    }
                }

				if(!data){
					parent=this.options;
					let str="",res=[];
					for(let k=0;k<this.record.length;k++){
						try{
							str+=parent[this.record[k]].text+"<span class='ui-cscader-hr'>/</span>";
							res.push([parent[this.record[k]].text,parent[this.record[k]].value]);
							parent=parent[this.record[k]].data;
						}catch(e){}
					}
					this.value=res;
					this.textValue=str;
					this.$emit('change',res);
					this.isshow=false;
					for(let k=0;k<this.list.length;k++){
						if(k>index-1)this.$set(this.list,k,[]);
					}
				}


				parent=this.options;
				for(let k=1;k<this.record.length;k++){
					if(k<=index){
						if(k==1){
							parent=parent[this.record[k-1]];
						}else{
							parent=parent.data[this.record[k-1]];
						}
					}else if(k>index){
						this.record[k]="";
					}
				}
				let tmpParent=index==0?parent:parent.data;
				for(let i in tmpParent){
					let a=false;
					if(key==i)a=true;
					tmpParent[i].ison=a;
				}




				if(data){
					this.$set(this.list,index,data);
					let num=1;
					for(let k=0;k<this.list.length;k++){
						if(k>index){
							this.$set(this.list,k,[]);
						}else{
							num++;
						}
					}
					this.style2={width:num*165+"px"};
				}
			},
			isshowlist(v){
				return objLen(v)==0?false:true;
			}
		}
	}
</script>
